<script>
export default {
  name: "classify",
  data(){
    return{
      apiUrl:{
        list: '/api/sample/hylist',
      },
      queryParams:{},
      sampleName:'',
      list: [],
      filterList:[],
      activateIndex: null,
      activateInfo: {},
    }
  },
  async mounted() {
    await this.getList();
  },
  beforeDestroy() {

  },
  methods: {
    getList() {
      this.postApiConfig(this.apiUrl.list,this.queryParams).then((res)=>{
        this.list = res.data
        this.filterList = res.data;
      })
    },
    inputSampleName(){
      this.filterList = this.list.filter((e) => {
        return e.sampleName.indexOf(this.sampleName) != -1;
      });
      this.activateIndex = this.filterList.findIndex(e => e.id === this.activateInfo.id);
    },
    choiceType(index){
      this.activateIndex = index;
      this.activateInfo = this.filterList[index];
      this.$emit('sampleName',this.filterList[index])
    },
  }
}
</script>

<template>
  <div class="classify-page">
    <!-- 搜索 -->
    <div class="classify-search">
      <el-row>
        <el-col :span="16">
          <el-form ref="queryForm" :model="queryParams" label-position="left" label-width="80px">
            <el-form-item label="样品名称:">
              <el-input v-model="sampleName" placeholder="请输入样品名称" @input="inputSampleName" clearable style="width: 100%;"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8" style="display: flex;justify-content: flex-end;align-content: center;">
        </el-col>
      </el-row>
    </div>
    <div class="classify-content" v-if="filterList.length > 0">
      <div class="classify-content-item" v-for="(item,index) in filterList" :key="index" @click="choiceType(index)" :class=" {'activateItem': activateIndex === index} ">
        <div class="content-item" style="width: 100%;height: 100%">
          <span>{{ item.sampleName }}</span>
        </div>
      </div>
    </div>
    <div class="classify-empty" v-else>
      <el-empty description="暂无检测项目，请联系管理员添加"></el-empty>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "./classify.css";
// 变量定义部分（通常放在文件顶部或其他配置区域）
$indicator-height: 7px; // 定义横条高度变量
$primary-color: #1D8EFF; // 定义主要颜色变量

.classify-page{
  width: 100%;
  display: flex;
  flex-direction: column;

  .classify-search{
    width: 100%;
    height: 62px;
  }

  .classify-tab {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    .card-tab{
      width: 100%;
      height: 40px;
      overflow-y: auto;
      scrollbar-width: thin;

      &::-webkit-scrollbar {
        width: 8px; /* 宽度 */
      }
      &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1); /* 轨道颜色 */
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.4); /* 滑块颜色 */
        border-radius: 4px; /* 圆角 */
      }
      &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.6); /* 鼠标悬停时滑块颜色 */
      }
    }
  }
  .classify-content{
    width: 100%;
    flex: 1;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 0.9375rem  /* 15/16 */ 1.5625rem  /* 25/16 */;

    /* 添加这一行以允许仅Y轴滚动 */
    overflow-y: auto;

    /* 下面是自定义滚动条样式，主要针对Webkit内核浏览器 */
    scrollbar-width: thin; /* Firefox */
    //scrollbar-color: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.2); /* Firefox */

    &::-webkit-scrollbar {
      width: 8px; /* 宽度 */
    }

    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1); /* 轨道颜色 */
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.4); /* 滑块颜色 */
      border-radius: 4px; /* 圆角 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.6); /* 鼠标悬停时滑块颜色 */
    }

    .classify-content-item{
      width: 47%;
      height: 3.125rem  /* 50/16 */;
      border-radius: 0.625rem  /* 10/16 */;
      box-sizing: border-box;
      padding: 0.3125rem  /* 5/16 */;
      background-color: #fcfcfc;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 400;
      font-size: 1.125rem  /* 18/16 */;
      color: #333333;
      cursor:pointer;
      transition: transform 0.3s ease; /* 0.3秒为过渡持续时间，ease为过渡速度曲线 */


      .content-item{
        text-align: center;
        line-height: 2.5rem  /* 40/16 */;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor:pointer;
        position: relative;

        .spotBox-a{
          position: absolute;
          right: 0.3125rem  /* 5/16 */;
          width: 0.625rem  /* 10/16 */;
          height: 0.625rem  /* 10/16 */;
          border-radius: 50%;
          top: 0.3125rem  /* 5/16 */;
          background-color: #00be1f;
        }
        .spotBox-b{
          position: absolute;
          right: 0.3125rem  /* 5/16 */;
          width: 0.625rem  /* 10/16 */;
          height: 0.625rem  /* 10/16 */;
          border-radius: 50%;
          bottom: 0.3125rem  /* 5/16 */;
          background-color: #1D8EFF;
        }
      }

      &:hover{
        transform: translateY(-0.1875rem  /* -3/16 */);
      }
    }

    .activateItem{
      background-color: #eef6ff;
      color: #0062c4;
      border: 1px solid #0062c4;
    }
  }

  .classify-empty{
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  // 右键菜单组件
  .custom-context-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    min-width: 100px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999; /* 确保菜单在最上层 */
  }

  .custom-context-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .custom-context-menu li {
    cursor: pointer;
    padding: 8px 10px;
    font-weight: 400;
    font-size: 1.125rem  /* 18/16 */;
  }

  .custom-context-menu li:hover {
    background-color: #eef6ff;
  }
}
</style>
